<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{ background-color: #eee; font-size: 12px;}
        #tabs{ width: 300px; margin: 100px auto; background: #fff; }
        #tabs #options{ height: 30px; line-height: 30px }
        #tabs #options span { width: 60px; text-align: center; display: inline-block; }
        #tabs #options span.on { border-bottom: 2px solid orange; font-weight: bold; }
        #tabs #contents{ padding: 10px 0; }
        #tabs #contents li{ line-height: 20px; padding-left: 15px; }
        #tabs #contents ul{ display: none }
    </style>
</head>
<body>
    <body>
        <div id="tabs">
            <div id="options">
                <span class="on">公告</span><span>规则</span><span>论坛</span><span>安全</span><span>公益</span>
            </div>
            <div id="contents">
                <ul style="display: block">
                    <li><a href="">阿里苏宁发布"新三体"战略 打造未来十年格局</a></li>
                    <li><a href="">高诚信会员无条件信任 200余万广告商品被处罚</a></li>
                </ul>
                <ul>
                    <li><a href="">出售假冒商品规则变更 商品发布数量限制变更</a></li>
                    <li><a href="">中国质造市场管理规范变更 淘宝网营销规则变更</a></li>
                </ul>
                <ul>
                    <li><a href="">淘宝招募卖家志愿者 阿里推出兼职神器</a></li>
                    <li><a href="">700家热风淘宝路 是赚钱还是骗子</a></li>
                </ul>
                <ul>
                    <li><a href="">淘宝用户必备神器 卖家账户安全9守则</a></li>
                    <li><a href="">支付宝实名认证信息 账户没钱也被骗？</a></li>
                </ul>
                <ul>
                    <li><a href="">阿里联合公益计划启动 一图看懂联合公益计划</a></li>
                    <li><a href="">公益宝贝卖家发票索取 公益机构淘宝开店攻略</a></li>
                </ul>
            </div>
        </div>
    
    </body>
</body>
<!-- <script>
    var spanList = document.querySelectorAll('#options  span');
    var ulList = document.querySelectorAll('#contents ul');
    // console.log(spanList);
    for (let i = 0; i < spanList.length; i++) {
        spanList[i].onclick = function(){
            spanList[i].className = ''; 
        }
        this.className = "no";
        // console.log(this.style,"this.style")
        this.style.cursor = "pointer";
        for (let j = 0; j < spanList.length; j++) {
            ulList[j].style.display = "none";
        }
        ulList[j].style.display = "block";
    }
</script> -->

<script>
    var spans = document.getElementsByTagName("span");
    var uls = document.getElementsByTagName("ul");
    var len = spans.length;
    for (let i = 0; i < len; i++) {
        spans[i].onmouseover = function () {
            // 1）处理上面的options
            for (let j = 0; j < len; j++) {
                spans[j].className = "";  // 本质还是操作属性节点
            }
            this.className = "on";
            this.style.cursor = "pointer";
            // 2）处理下面的ul
            for (let j = 0; j < len; j++) {
                uls[j].style.display = "none";
            }
            uls[i].style.display = "block";
        }
    }
</script>
</html>